<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script>
    function isObject(value) {
      return typeof value === "object" && value !== null
    }
    /**
     * 创建响应式数据
     * @param {*} obj 普通对象
     * @return [proxy] 代理对象
    */

    function reactive(data) {
      if(!isObject) return

      return new Proxy(data, {
        get(target, key) {
          return target[key]
        },
        set(target, key, value) {
          target[key] = value
          // 调用副作用函数
          effect()
          return true
        }
      })
    }
    const state = {name:'孙悟空', age: 18}
    // 定义一个变量，触发者
    const proxy = reactive(state)

    // 定义一个函数，响应者
    function effect() {
      app.innerHTML = proxy.name
    }
    effect()
    // 模拟数据的改变
    setTimeout(()=> {
      proxy.name = '猪八戒';
    },1000)


    /*
      思考：如果一个属性，存在多个与之对应的副作用函数，
      当属性发生改变时，属性关联的每一个副作用函数，都应该重新执行！
      这应该如何实现？
    */
  </script>
</body>
</html>